<script lang="ts">
interface props {
  name: string;
  size?: number;
  color?: string;
}

export default {
  name: 'svgIcon',
  props: {
    // 图的组件名字
    name: {
      type: String,
      require: true,
    },
    size: {
      type: Number,
      default: () => 16,
    },
    // 图的颜色
    color: {
      type: String,
    },
  },
  setup(props: props) {
    const eleStyle = { class: 'el-icon', style: `font-size: ${props.size}px; color: ${props.color}` };
    const namePrefix: string[] = ['https', 'http', '/src', '/assets'];
    const namePrefix_style: string = `width: ${props.size}px; height: ${props.size}px`;

    if (props.name?.startsWith('ele-')) {
      return () => h('i', eleStyle, [props.name === 'ele-' ? '' : h(resolveComponent(props.name))]);
    } else if (namePrefix.find((prefix) => props.name?.startsWith(prefix))) {
      return () => h('img', { src: props.name, style: namePrefix_style });
    }
  },
};
</script>
